<template>
  <div class="about-container">
    <section class="about-hero">
      <div class="hero-overlay">
        <p class="about-subtitle">致力于为电商从业者提供智能高效的工具</p>
      </div>
    </section>

    <section class="about-content">
      <div class="about-card">
        <h2 class="section-title">公司简介</h2>
        <p class="about-text">
          电商工具助手成立于2022年，是一家专注于为电商从业者提供智能化工具解决方案的科技公司。我们的团队由电商行业资深专家和技术精英组成，致力于通过技术创新解决电商运营过程中的各种痛点问题。
        </p>
        <p class="about-text">
          自成立以来，我们已服务超过1000家电商企业，帮助他们提升运营效率，优化产品展示，提高转化率。我们相信，科技的力量可以让电商运营变得更简单、更高效。
        </p>
      </div>

      <div class="about-card">
        <h2 class="section-title">我们的使命</h2>
        <p class="about-text">让电商运营变得简单而高效，使每一位电商从业者都能专注于创造更好的产品和服务，而不是被繁琐的运营工作所困扰。</p>
        <div class="mission-points">
          <div class="mission-point">
            <div class="point-number">01</div>
            <h3 class="point-title">简化工作流程</h3>
            <p class="point-desc">通过智能工具自动化繁琐任务，节省宝贵时间</p>
          </div>
          <div class="mission-point">
            <div class="point-number">02</div>
            <h3 class="point-title">提升运营效率</h3>
            <p class="point-desc">优化工作方式，让每一分投入都产生最大价值</p>
          </div>
          <div class="mission-point">
            <div class="point-number">03</div>
            <h3 class="point-title">赋能商家成长</h3>
            <p class="point-desc">提供专业工具与见解，帮助商家实现业务增长</p>
          </div>
        </div>
      </div>

      <div class="about-card">
        <h2 class="section-title">我们的团队</h2>
        <p class="about-text">
          我们的团队来自各大知名电商平台和科技公司，拥有丰富的行业经验和技术实力。团队成员平均拥有8年以上的电商或技术开发经验，深入了解电商行业的各种挑战和需求。
        </p>
        <p class="about-text">
          我们坚信，只有真正了解用户需求的团队，才能打造出真正有价值的产品。因此，我们持续与用户保持紧密沟通，不断优化和完善我们的产品，以满足电商从业者不断变化的需求。
        </p>
      </div>
    </section>
    <Footer />
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'default',
});
</script>

<style scoped>
.about-container {
  min-height: 100vh;
  background: var(--bg-light, #f8f9fa);
}

.about-hero {
  height: 100px;
  background: linear-gradient(135deg, var(--primary-purple, #6b46c1) 0%, var(--secondary-purple, #805ad5) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 4rem;
}

.hero-overlay {
  text-align: center;
  color: white;
  padding: 2rem;
  z-index: 1;
}

.about-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.about-subtitle {
  font-size: 1.25rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

.about-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

.about-card {
  background: white;
  border-radius: 1rem;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.05),
    0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 2.5rem;
  margin-bottom: 3rem;
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary, #2d3748);
  margin-bottom: 1.5rem;
  text-align: center;
}

.about-text {
  font-size: 1.125rem;
  color: var(--text-secondary, #4a5568);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.mission-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.mission-point {
  text-align: center;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 0.75rem;
  transition: transform 0.3s ease;
}

.mission-point:hover {
  transform: translateY(-5px);
}

.point-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-purple, #6b46c1);
  opacity: 0.3;
  margin-bottom: 1rem;
}

.point-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary, #2d3748);
  margin-bottom: 0.75rem;
}

.point-desc {
  color: var(--text-secondary, #4a5568);
}

.contact-info {
  margin-bottom: 3rem;
}

.contact-item {
  display: flex;
  margin-bottom: 1rem;
  font-size: 1.125rem;
}

.contact-label {
  font-weight: 600;
  width: 80px;
  color: var(--text-primary, #2d3748);
}

.contact-value {
  color: var(--text-secondary, #4a5568);
}

.contact-form {
  background: #f8f9fa;
  padding: 2rem;
  border-radius: 0.75rem;
}

.form-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary, #2d3748);
  margin-bottom: 1.5rem;
  text-align: center;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--text-primary, #2d3748);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-purple, #6b46c1);
}

.contact-button {
  display: block;
  width: 100%;
  background: var(--primary-purple, #6b46c1);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition:
    background-color 0.2s,
    transform 0.2s;
  border: none;
}

.contact-button:hover {
  background: var(--secondary-purple, #805ad5);
  transform: translateY(-2px);
}

/* 平板和移动端的响应式调整 */
@media (max-width: 768px) {
  .about-title {
    font-size: 2.5rem;
  }

  .about-hero {
    height: 250px;
  }

  .about-card {
    padding: 2rem 1.5rem;
  }

  .section-title {
    font-size: 1.75rem;
  }
}

@media (max-width: 480px) {
  .about-title {
    font-size: 2rem;
  }

  .about-hero {
    height: 200px;
  }

  .contact-item {
    flex-direction: column;
  }

  .contact-label {
    width: 100%;
    margin-bottom: 0.25rem;
  }
}
</style>
